<template>
	<div class="wrapper lieBiao">
		<myhead :activeIndex="`/video?name=${knowledge}&id=${knowledgeId}`"></myhead>
		<div class="content center align-start fWrap box-item">
			<div class="left flex">
				<div class="bfff left-top">
					<!-- 默认搜索框 -->
					<div class="center title fWrap">
						<img src="@/assets/image/zhuTi/t1.png" alt="" class="disNo" />
						<div class="hr disNo"></div>
						<div class="f20 c333 fbold titleFs">{{ knowledge }}</div>
						<!-- <input
							type="text"
							placeholder="请输入搜索关键词"
							v-model="content"
							@keyup.enter.native="searchList"
						/>
						<el-button class="search-btn" type="primary" :icon="Search" @click="searchList">
							搜索
						</el-button> -->
						<div @click="setShowMore" class="flex tRight f14 ctheme pointer disNo">
							{{ showMore ? "收起" : "展开" }}
						</div>
						<el-icon @click="setShowMore" class="pointer disNo" size="18" color="#2972FA">
							<ArrowUp v-if="showMore" />
							<ArrowDown v-else />
						</el-icon>
					</div>
					<!-- 高级搜索展开部分 -->
					<div class="left-top-content" v-if="showMore">
						<div class="center row nav navs">
							<div class="navs-box">
								<div class="label f14 c333">标题:</div>
								<div class="flex">
									<el-input class="authors" v-model="content"></el-input>
								</div>
							</div>
							<div class="navs-box">
								<div class="label f14 c333">作者:</div>
								<div class="flex">
									<el-input class="author" v-model="userName"></el-input>
								</div>
							</div>
						</div>
						<div class="center row disNo">
							<div class="label f14 c333">已选条件:</div>
							<div class="flex center fWrap flex-start">
								<!-- <el-tag class="choice-tag" closable round effect="light" v-if="!switchValue"
									>所属分类：{{ divideStr.name }}</el-tag
								> -->
								<div>
									<el-tag
										class="choice-tag"
										closable
										round
										effect="light"
										@close="delLists(index)"
										v-for="(item, index) in divideNames"
										:key="index"
										><div style="display: flex">
											<div>所属分类：</div>
											<div class="menu-item">{{ item }}</div>
										</div>
									</el-tag>
									<el-tag
										class="choice-tag"
										closable
										round
										effect="light"
										@close="delListsStr"
										v-if="listStrName != ''"
										>作者：{{ listStrName }}</el-tag
									>
									<el-tag
										class="choice-tag"
										closable
										round
										effect="light"
										@close="delListsTime"
										v-if="listStr != ''"
										>发布时间：{{ listStr }}</el-tag
									>
									<el-button
										type="primary"
										link
										@click="delList"
										v-if="divideList.length > 0 || listStrName.length > 0 || listStr.length > 0"
										>清空筛选</el-button
									>
								</div>
							</div>
						</div>
						<div class="center row nav">
							<div class="label f14 c333">所属分类:</div>
							<div class="flex center flex-start fen-ax">
								<!-- <div class="c666 f16 hover ctheme">不限</div> -->
								<div
									class="c666 f14 hover"
									:class="isActive(item) ? 'ctheme' : ''"
									@click="divides(item, index)"
									v-for="(item, index) in divide"
									:key="item.id"
								>
									{{ item.name }}
								</div>
							</div>
							<el-switch v-model="switchValue" active-text="多选" class="disNo" />
						</div>
						<!-- <div class="center row nav">
							<div class="label f14 c333">作者:</div>
							<div class="flex">
								<el-input class="author" v-model="userName"></el-input>
							</div>
						</div> -->
						<div class="center row nav">
							<div class="label f14 c333">发布时间:</div>
							<div class="flex center fWrap flex-start">
								<div class="c666 f14 hover disNo" :class="{ ctheme: actives == '1' }" @click="noLimit">
									不限
								</div>
								<div class="c666 f14 hover disNo" :class="{ ctheme: actives == '2' }" @click="aWeek">
									近一个月
								</div>
								<div class="c666 f14 hover disNo" :class="{ ctheme: actives == '3' }" @click="march">
									近三个月
								</div>
								<div
									class="c666 f14 hover disNo"
									:class="{ ctheme: actives == '4' }"
									@click="halfAyear"
								>
									近半年
								</div>
								<div class="c666 f14 hover disNo" :class="{ ctheme: actives == '5' }" @click="year">
									近一年
								</div>
								<div class="send-time">
									<el-date-picker
										v-model="time"
										type="daterange"
										range-separator="-"
										start-placeholder="开始时间"
										end-placeholder="结束时间"
										value-format="YYYY-MM-DD HH:mm:ss"
										:clearable="false"
										@change="onPicker"
									/>
									<!-- :disabled-date="pickerOptions" -->
								</div>
							</div>
						</div>
						<div class="soul-box">
							<el-button type="primary" class="soul-box-primary" @click="searchList">搜索</el-button>
							<el-button @click="resetting">重置</el-button>
						</div>
					</div>
				</div>
				<div class="bfff left-bottom">
					<div class="center table-head">
						<div style="margin-right: 5px">
							<el-checkbox
								v-model="checkAll"
								@change="handleCheckAllChange"
								:indeterminate="isIndeterminate"
								>全选</el-checkbox
							>
						</div>
						<div class="c666 f14 choice-num">
							已选：<span v-if="checkedId && checkedId.length">{{ checkedId.length }}</span>
							<span v-else>0</span>
						</div>
						<div class="c666 f14 disNo7">排序：</div>
						<el-select v-model="sort" class="paiXu disNo7" placeholder="Select" @change="onOption">
							<el-option
								v-for="item in options"
								:key="item.value"
								:label="item.label"
								:value="item.value"
							/>
						</el-select>
						<div class="center colum pointer sheng-jiang disNo7" @click="sorts()">
							<div v-if="sortSte == 'ASC'" style="display: flex; flex-direction: column">
								<el-icon size="15" color="#2972FA">
									<CaretTop />
								</el-icon>
								<el-icon size="15" color="#c0c4cc">
									<CaretBottom />
								</el-icon>
							</div>
							<div v-else style="display: flex; flex-direction: column">
								<el-icon size="15" color="#c0c4cc">
									<CaretTop />
								</el-icon>
								<el-icon size="15" color="#2972FA">
									<CaretBottom />
								</el-icon>
							</div>
						</div>
						<el-icon class="hover disNo7" size="15" color="#C0C4CC" @click="addCurrnt(1)">
							<ArrowLeft />
						</el-icon>
						<div class="center page f16 c999 disNo7">
							<span class="c333" v-if="lengthStr(total)">{{ current }}</span
							><span v-else>0</span> &nbsp;/&nbsp;{{ lengthStr(total) }}
						</div>
						<el-icon class="hover disNo7" size="15" color="#333" @click="addCurrnt(2)">
							<ArrowRight />
						</el-icon>
						<el-icon class="RefreshRight pointer disNo8" size="20" color="#2972FA" @click="shuaxin">
							<RefreshRight />
						</el-icon>
						<div class="center flex flex-end">
							<el-button
								class="danger"
								type="danger"
								plain
								@click="onDel"
								v-if="dataList && dataList.length"
								>删除</el-button
							>
							<el-button class="primary" type="primary" @click="add" :disabled="checkedId.length > 0"
								>发布</el-button
							>
						</div>
					</div>
					<div class="center fWrap mt20 flex-shiPin" v-if="dataList && dataList.length">
						<div
							class="box-shiPin"
							:class="{
								active: checkedId.includes(v.id),
							}"
							v-for="v in dataList"
							:key="v.id"
						>
							<div class="fdd"></div>
							<div class="shiPin posr">
								<div class="cesi">
									<img
										@click="router.push(`/videoDetails?id=${v.id}&swId=${v.swId}`)"
										:src="v.cover"
										class="cover hoverBtn"
										alt=""
									/>
									<div
										@click="router.push(`/videoDetails?id=${v.id}&swId=${v.swId}`)"
										class="state center posa cfff f14"
										v-if="v.status == 1"
									>
										发布
									</div>
									<div
										@click="router.push(`/videoDetails?id=${v.id}&swId=${v.swId}`)"
										class="state center posa cfff f14"
										v-if="v.status == 2"
									>
										下架
									</div>
									<div
										@click="router.push(`/videoDetails?id=${v.id}&swId=${v.swId}`)"
										class="state center posa cfff f14"
										v-if="v.status == 3"
									>
										已过期
									</div>
									<img
										src="@/assets/image/zhuTi/bo.png"
										@click="router.push(`/videoDetails?id=${v.id}&swId=${v.swId}`)"
										class="posa bo"
										alt=""
									/>
								</div>
								<div class="f16 c333 line2 hover">
									<div
										class="shiPinTital"
										@click="router.push(`/videoDetails?id=${v.id}&swId=${v.swId}`)"
									>
										{{ v.title }}
									</div>
									<div>
										<el-checkbox-group
											class="fdd-checc"
											v-model="checkedId"
											@change="handleCheckedCitiesChange"
										>
											<el-checkbox class="el-checkbox" size="large" :label="v.id">
												<template #default></template>
											</el-checkbox>
										</el-checkbox-group>
									</div>
								</div>

								<div class="center space-between f14 c999">
									<span class="userNameText"
										><span class="disNo8"> 作者：</span>{{ v.userName }}</span
									>
									<div class="f14 userNameText">{{ times(v.createTime) }}</div>
								</div>
							</div>
						</div>
						<div class="box-shiPin plac"></div>
						<div class="box-shiPin plac"></div>
						<div class="box-shiPin plac"></div>
					</div>
					<div v-else class="kong">
						<el-empty description="暂无数据" />
					</div>
					<div class="bfff paginationClass">
						<v-pagination
							:total="+total"
							v-model:size="pageSize"
							v-model:page="current"
							:pageSizes="pageSizes"
							@pagination="searchLists"
							@paginations="searchLists"
						></v-pagination>
					</div>
				</div>
			</div>
			<div class="right">
				<tuijian></tuijian>
			</div>
		</div>
		<!-- 新建蒙层 -->
		<el-dialog
			v-model="visible"
			:show-close="false"
			:close-on-click-modal="false"
			:before-close="quxiao"
			:destroy-on-close="true"
		>
			<template #header="{ close, titleId, titleClass }">
				<div class="dialog-header center btheme cfff">
					<img src="@/assets/image/zhuTi/xin.png" alt="" />
					<div class="flex f18 fbold">选择视频分类</div>
					<el-icon class="pointer" size="20" color="#fff" @click="close">
						<Close />
					</el-icon>
				</div>
			</template>
			<div class="dialog-content">
				<div v-if="data && data.length">
					<el-tree
						:data="data"
						@node-click="handleNodeClick"
						@node-expand="expandHand"
						:props="{ value: 'id', label: 'name', children: 'children' }"
					/>
				</div>
				<div v-else class="dialog-prompt">
					<div v-if="dataObj.code == 2022">{{ dataObj.data }}</div>
					<div v-if="dataObj.code == 2023" @click="onToBase" class="dialog-prompt-code">
						{{ dataObj.data }}
					</div>
				</div>
			</div>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="quxiao">取消</el-button>
					<el-button type="primary" @click="onYes"> 确定 </el-button>
				</div>
			</template>
		</el-dialog>

		<v-myfoot></v-myfoot>
	</div>
</template>

<script setup>
import { watch } from "vue"
import { Search, RefreshRight } from "@element-plus/icons-vue"
import { getAxios, postAxios } from "/axios"
import { useFormatDate } from "/utils/useDate.js"
import { ElMessage, ElMessageBox } from "element-plus"
import tuijian from "./components/tuijian.vue"
const { proxy } = getCurrentInstance()
const route = useRoute()
const router = useRouter()
const total = ref(0)
//升降排序
const sortSte = ref("DESC")
const checkList = ref(["不限"])
const switchValue = ref(false)
const showMore = ref(true)
const visible = ref(false)
const isIndeterminate = ref(false)
const videoRef = ref()
//新建
const data = ref([])
//新建知识swId
const swId = ref("")
const ids = ref("")
const listStrName = ref("")
const listStr = ref("")
//分类
const divide = ref([])
//时间
const time = ref([])
//新建知识库
const handName = ref("")
//分类
let divideList = ref([])
const checked = ref([
	{
		id: "",
		name: "不限",
	},
])
const checkedId = ref([])
const checkAll = ref(false)
//删除
const divideNames = computed(() => divideList.value.map(item => item.name))
const divideId = computed(() => divideList.value.map(item => item.id))
const deleteList = ref([])
//数据
const dataList = ref([])
//搜索内容
const content = ref("")
const current = ref(1)
//页面宽度
const screenWidth = ref(null)
const screenWidthIf = ref(true)

//作者
const userName = ref("")
const setShowMore = () => {
	showMore.value = !showMore.value
}
//排序
const sort = ref("pub_time")
const options = [
	{
		value: "pub_time",
		label: "发布时间",
	},
	{
		value: "readCount",
		label: "浏览量",
	},
]
//时间index
const actives = ref("1")
const pageSize = ref(16)
const pageSizes = ref([8, 16, 32, 64])
const knowledge = ref("")
const knowledgeId = ref("")
const checkListDia = ref(["标准"])
const checked1 = ref(false)
let dataObj = ref({})
async function list() {
	knowledge.value = route.query.name
	knowledgeId.value = route.query.id
	divide.value = await getAxios(`/knowledge/kbCategory/findBySwWid?swId=${route.query.id}`)
	divide.value.unshift({
		id: "",
		name: "不限",
	})
	// const res = await getAxios(
	// 	`/knowledge/kbVideo/page?swId=${route.query.id}&sortField=${sort.value}&sortType=${sortSte.value}&size=${pageSize.value}&current=${current.value}`
	// )
	// dataList.value = res.records
	// total.value = +res.total
}
list()
const onChange = () => {
	listStrName.value = userName.value
}
watch(route, () => {
	knowledge.value = route.query.name
	knowledgeId.value = route.query.id
	list()
})
//宽度
onMounted(() => {
	screenWidth.value = document.body.clientWidth
	if (screenWidth.value >= 1920) {
		pageSize.value = 32
		listVideo()
	} else if (screenWidth.value > 960 && screenWidth.value < 1919) {
		pageSize.value = 16
		listVideo()
	} else if (screenWidth.value <= 960) {
		pageSize.value = 8
		listVideo()
	}
})

async function listVideo() {
	const res = await getAxios(
		`/knowledge/kbVideo/page?swId=${route.query.id}&sortField=${sort.value}&sortType=${sortSte.value}&size=${pageSize.value}&current=${current.value}`
	)
	dataList.value = res.records
	total.value = +res.total
	screenWidthIf.value = false
}
//高亮
function isActive(item) {
	return !!~checked.value.findIndex(check => check.id == item.id)
}
//分类
const divides = (item, index) => {
	if (checked.value[0].name == "不限") {
		checked.value.splice(0, 1)
	}
	if (switchValue.value) {
		if (isActive(item)) {
			const index = checked.value.findIndex(check => check.id == item.id)
			checked.value = checked.value.filter(check => check.id != item.id)
			divideList.value.splice(index, 1)
		} else {
			checked.value.push(item)
			divideList.value.push(item)
		}
	} else {
		checked.value = checked.value.filter(check => check.id != item.id)
		checked.value = []
		divideList.value = []
		checked.value.push(item)
		divideList.value.push(item)
	}
	searchLists()

	if (divideList.value.length == 0) {
		empty()
	}
}
const handleCheckAllChange = () => {
	if (checkAll.value) {
		let cheList = []
		dataList.value.forEach(item => {
			cheList.push(item.id)
		})
		checkedId.value = cheList
	} else {
		checkedId.value = []
	}
	isIndeterminate.value = false
}
//选择主题
const handleNodeClick = data => {
	swId.value = data.swId
	ids.value = data.id
}
const expandHand = data => {
	handName.value = data.name
}
watch(switchValue, () => {
	if (!switchValue.value) {
		checked.value = [
			{
				id: "",
				name: "不限",
			},
		]
		divideList.value = []
	}
})
//搜索
const searchList = () => {
	searchLists()
	current.value = 1
}
const searchLists = async () => {
	const list = []
	if (!switchValue.value && divideList.value.length) {
		if (divideList.value[0].id != "") {
			list[0] = divideList.value[0].id
		}
	} else {
		divideList.value.forEach(item => {
			list.push(item.id)
		})
	}
	const obj = {
		swId: route.query.id,
		fromTime: time.value[0],
		endTime: time.value[1],
		sortField: sort.value,
		sortType: sortSte.value,
		size: pageSize.value,
		current: current.value,
	}
	if (!content.value == "") {
		obj.title = content.value
	}
	if (list.length > 0) {
		obj.categoryIds = list.join()
	}
	if (!userName.value == "") {
		obj.userName = userName.value
	}
	const res = await getAxios("/knowledge/kbVideo/page", obj)
	total.value = +res.total
	dataList.value = res.records
}
//重置
const resetting = () => {
	empty()
	list()
}
//清空
const delList = () => {
	empty()
	list()
}
//清空选择
//清空
const delLists = index => {
	divideList.value.splice(index, 1)
	checked.value.splice(index, 1)
	if (divideList.value.length == 0) {
		checked.value = [
			{
				id: "",
				name: "不限",
			},
		]
	}
}
// 时间
const noLimit = () => {
	actives.value = "1"
	time.value = []
	listStr.value = "不限"
	searchLists()
}
// 月
const aWeek = () => {
	actives.value = "2"
	const d = new Date()
	const sd = new Date(d.getTime() - 30 * 24 * 60 * 60 * 1000)
	time.value = [useFormatDate(sd, "yyyy-MM-dd 00:00:00"), useFormatDate(d, "yyyy-MM-dd 23:59:59")]
	listStr.value = "近一个月"
	searchLists()
}
// 三个月
const march = () => {
	actives.value = "3"
	const d = new Date()
	const sd = new Date(d.getTime() - 90 * 24 * 60 * 60 * 1000)
	time.value = [useFormatDate(sd, "yyyy-MM-dd 00:00:00"), useFormatDate(d, "yyyy-MM-dd 23:59:59")]
	listStr.value = "近三个月"
	searchLists()
}
//半年
const halfAyear = () => {
	actives.value = "4"
	const d = new Date()
	const sd = new Date(d.getTime() - 183 * 24 * 60 * 60 * 1000)
	time.value = [useFormatDate(sd, "yyyy-MM-dd 00:00:00"), useFormatDate(d, "yyyy-MM-dd 23:59:59")]
	listStr.value = "近半年"
	searchLists()
}
// 年
const year = () => {
	actives.value = "5"
	const d = new Date()
	const sd = new Date(d.getTime() - 365 * 24 * 60 * 60 * 1000)
	time.value = [useFormatDate(sd, "yyyy-MM-dd 00:00:00"), useFormatDate(d, "yyyy-MM-dd 23:59:59")]
	listStr.value = "近一年"
	searchLists()
}
//表格
const onSelect = row => {
	deleteList.value = []
	row.forEach(item => {
		deleteList.value.push(item.id)
	})
}
const onSelectAll = selection => {
	deleteList.value = []
	selection.forEach(item => {
		deleteList.value.push(item.id)
	})
}
const onPicker = val => {
	actives.value = "1"
	searchLists()
	listStr.value = time.value[0].slice(0, 10) + "-" + time.value[1].slice(0, 10)
}
//删除
// JSON.stringify
const onDel = async () => {
	if (checkedId.value && checkedId.value.length) {
		ElMessageBox.confirm("是否确认删除", "提示", {
			confirmButtonText: "确定",
			cancelButtonText: "取消",
			type: "warning",
		}).then(async () => {
			try {
				const res = await postAxios("/knowledge/kbVideo/deleteBatch", checkedId.value)
				if (!res == "删除成功") {
					ElMessage.error(res)
					checkedId.value = []
				} else {
					ElMessage.success("删除成功")
					checkedId.value = []
				}
				list()
				listVideo()
			} catch (error) {
				ElMessage.error(error)
			}
		})
	} else {
		ElMessage.error("请选择视频")
	}
}
//排序
const onOption = async val => {
	// 排序
	searchLists()
	// const res = await getAxios(
	// 	`/knowledge/kbVideo/page?swId=${route.query.id}&sortField=${sort.value}&sortType=${sortSte.value}&size=${pageSize.value}&current=${current.value}`
	// )
	// total.value = +res.total
	// dataList.value = res.records
}

const cellClick = row => {
	// const routerSwid = row.id
	router.push(`/knowledgeDetails?id=${row.id}&swId=${row.swId}`)
}
const add = async () => {
	visible.value = true
	data.value = []
	dataObj.value = {}
	const res = await getAxios("/knowledge/kbSubjectWarehouse/findByListToCategoryVideoAdd")
	data.value = res.children
	if (res instanceof Object) {
		dataObj.value = res
	} else {
		data.value = res
	}
}
const onYes = async () => {
	if (swId.value) {
		router.push(`/addVideo?swId=${swId.value}&id=${ids.value}&name=${handName.value}`)
	} else {
		ElMessage.error("请选择二级分类")
	}
}
const sorts = async () => {
	// if(sortSte)
	if (sortSte.value == "ASC") {
		sortSte.value = "DESC"
	} else {
		sortSte.value = "ASC"
	}
	searchLists()
	// const res = await getAxios(
	// 	`/knowledge/kbVideo/page?swId=${route.query.id}&sortField=${sort.value}&sortType=${sortSte.value}&size=${pageSize.value}&current=${current.value}`
	// )
	// total.value = +res.total
	// dataList.value = res.records
}
const delListsStr = index => {
	listStrName.value = ""
	userName.value = ""
}
const delListsTime = index => {
	listStr.value = ""
	actives.value = "1"
	time.value = ""
}
//清空
function empty() {
	checked.value = [
		{
			id: "",
			name: "不限",
		},
	]
	content.value = ""
	sort.value = "pub_time"
	time.value = []
	userName.value = ""
	divideList.value = []
	listStr.value = ""
	actives.value = "1"
}
const shuaxin = () => {
	empty()
	list()
}
function times(time) {
	return time.substring(0, 10)
}
// const onToSp = row => {
// 	router.push(`/videoDetails?id=${row.id}&swId=${row.swId}`)
// }

const fetchList = async val => {
	current.value = +val
	const res = await getAxios(
		`/knowledge/kbVideo/page?swId=${route.query.id}&sortField=${sort.value}&sortType=${sortSte.value}&size=${pageSize.value}&current=${current.value}`
	)
	total.value = +res.total
	dataList.value = res.records
}
const fetchLists = async val => {
	pageSize.value = val
	const res = await getAxios(
		`/knowledge/kbVideo/page?swId=${route.query.id}&sortField=${sort.value}&sortType=${sortSte.value}&size=${val}&current=${current.value}`
	)
	total.value = +res.total
	dataList.value = res.records
}
function lengthStr(val) {
	return Math.ceil(val / 8)
}
const addCurrnt = async val => {
	if (current.value != 1) {
		switch (val) {
			case 1:
				current.value -= 1
				break
			case 2:
				if (current.value < lengthStr(total.value)) current.value += 1
				break
		}
	} else {
		switch (val) {
			case 2:
				if (current.value < lengthStr(total.value)) current.value += 1
				break
		}
	}
	searchLists()
	// const res = await getAxios(
	// 	`/knowledge/kbVideo/page?swId=${route.query.id}&sortField=${sort.value}&sortType=${sortSte.value}&size=${pageSize.value}&current=${current.value}`
	// )
	// total.value = +res.total
	// dataList.value = res.records
}
const handleCheckedCitiesChange = val => {
	if (checkedId.value.length) {
		isIndeterminate.value = true
		if (checkedId.value.length == dataList.value.length) {
			isIndeterminate.value = false
			checkAll.value = true
		}
	} else {
		isIndeterminate.value = false
	}
}
function pickerOptions(time) {
	return time.getTime() > Date.now()
}
const quxiao = () => {
	data.value = []
	visible.value = false
}
const onToBase = () => {
	router.push(`/knowledgeClassification?name=${route.query.name}&id=${route.query.id}`)
}
</script>
<style lang="scss" scoped>
@import "/style/basis";

.lieBiao {
	background-color: #f8f8f8;

	.box-item {
		// height: 78vh;
		overflow-y: auto;
	}

	:deep(.el-dialog) {
		width: 600px !important;
	}

	.shipin-item {
		justify-content: flex-start;
	}

	.flex-shiPin {
		display: flex;
		justify-content: space-between;
		min-height: 575px;
		align-content: flex-start;
		@include maxWidth(1270) {
			justify-content: space-around;
		}
		// margin-right:20px;
		&.plac {
			height: 0;
			visibility: hidden;
		}

		.box-shiPin {
			position: relative;
			width: 23%;
			margin-bottom: 40px;
			margin-right: 10px;
			// border-radius: 8px;
			// border: 1px solid #eee;
			overflow: hidden;
			@include maxWidth(5000) {
				width: 15%;
			}
			@include maxWidth(1980) {
				width: 18%;
			}
			@include maxWidth(1680) {
				width: 23%;
			}
			@include maxWidth(1280) {
				width: 28%;
			}
			@include maxWidth(880) {
				width: 48%;
			}
			@include maxWidth(650) {
				width: 45%;
			}
			&.plac {
				opacity: 0;
			}

			&.active {
				.fdd {
					background: #eee;
				}
			}

			.fdd-checc {
				width: 100%;

				.el-checkbox {
					justify-content: flex-end;
					width: 100%;
					// padding-left: 20px;
				}
			}

			// @include maxWidth(750) {
			// 	width: 49%;
			// }
		}
	}
	.kong {
		min-height: 575px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	:deep(.shiPin:nth-of-type(4n)) {
		margin-right: 0;
	}

	:deep(.el-dialog__body) {
		padding: 25px 24px !important;
		max-height: 300px !important;
		height: 300px !important;
		overflow-y: scroll !important;
	}

	:deep(.dialog-content .el-checkbox) {
		width: 100%;
		margin-right: 0;
	}
	.dialog-prompt {
		margin-top: 30px;
		text-align: center;
		.dialog-prompt-code {
			cursor: pointer;
			color: #2972fa;
		}
	}
	.left-bottom {
		padding: 20px;

		.table-head {
			border: 1px solid #eceef5;
			height: 50px;
			padding: 0 2%;

			.primary {
				width: 50px;
				height: 30px;
				border-radius: 3px;
			}

			.danger {
				width: 50px;
				height: 30px;
				border: 1px solid #fbc4c4;
				border-radius: 3px;
			}

			.RefreshRight {
				margin-left: 40px;
			}

			.sheng-jiang {
				margin-right: 10px;
			}

			:deep(.sheng-jiang .el-icon) {
				margin: -2px 0;
			}

			.page {
				width: 60px;
			}

			.paiXu {
				width: 100px;
				height: 30px;
				// margin-right: 12px;
				margin-right: 15px;
			}

			:deep(.paiXu .el-input__wrapper) {
				border-radius: 15px;
				height: 30px;
				color: #666666;
			}

			.choice-num {
				padding-right: 20px;
			}

			.hr {
				width: 2px;
				height: 15px;
				background: #eceef5;
				margin: 0 0.13px;
			}
		}

		:deep(.el-table) {
			border: 1px solid #eceef5;
		}

		:deep(.el-table th.el-table__cell) {
			background-color: #f4f7fa;
		}

		:deep(.el-table .el-table__cell) {
			height: 49px;
			color: #606266;
		}
	}

	.left-top-content {
		padding: 10px 15px;
		border: 1px solid #eceef5;
		margin-top: 20px;

		// :deep(.send-time) {
		// 	width: 350px;
		// 	height: 25px;
		// 	border-radius: 13px;
		// }

		.author {
			width: 200px;
			height: 30px;
			border-radius: 3px;

			@include maxWidth(1600) {
				width: 150px;
			}

			@include maxWidth(1200) {
				width: 130px;
			}

			@include maxWidth(1024) {
				width: 110px;
			}

			@include maxWidth(768) {
				width: 140px;
			}

			@include maxWidth(700) {
				width: 120px;
			}
		}
		.authors {
			width: 350px;
			height: 30px;
			border-radius: 3px;

			@include maxWidth(1600) {
				width: 250px;
			}

			@include maxWidth(1200) {
				width: 130px;
			}

			@include maxWidth(1024) {
				width: 110px;
			}

			@include maxWidth(768) {
				width: 140px;
			}

			@include maxWidth(700) {
				width: 120px;
			}
		}
		.er-icon {
			width: 11px;
			margin-right: 15px;
		}
		.soul-box {
			margin-top: 10px;
			display: flex;
			justify-content: center;
			.soul-box-primary {
				margin-right: 20px;
			}
		}
		.navs {
			justify-content: start;
			@include maxWidth(700) {
				height: 80px !important;
				display: block;
			}
			.navs-box {
				display: flex;
				margin-right: 30px;
				align-items: center;
				@include maxWidth(700) {
					margin-bottom: 10px;
				}
			}
		}
		.nav {
			.c666 {
				margin-right: 15px;

				@include maxWidth(1050) {
					margin-right: 10px;
				}
			}
			:deep(.el-switch) {
				margin-left: 20px;
			}
		}

		:deep(.el-tag__close) {
			background-color: #2972fa;
			color: #fff;
		}

		.choice-tag {
			line-height: 30px;
			background: #f4faff;
			border: 1px solid #2972fa;
			border-radius: 15px;
			padding: 0 11px;
			color: #2972fa;
			margin-right: 14px;
			.menu-item {
				text-align: center;
				max-width: 150px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}

		.row {
			border-bottom: 1px dashed #eceef5;
			height: 45px;
		}

		.label {
			width: 100px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			@include maxWidth(800) {
				font-size: 14px;
			}

			@include maxWidth(600) {
				width: 60px;
				font-size: 12px;
			}
		}
	}

	.left-top {
		padding: 35px 25px;
		padding-bottom: 0;

		@include maxWidth(550) {
			padding: px2vw(35) px2vw(25);
			padding-bottom: 0;
		}

		.title {
			.tRight {
				margin-right: 10px;
			}

			:deep(.search-btn) {
				width: 80px;
				height: 32px;
				border-radius: 0rem 15px 15px 0rem;
			}

			input {
				width: 312px;
				height: 32px;
				line-height: 32px;
				background: #f5f6f7;
				border: 1px solid #e8e8ed;
				border-radius: 15px 0rem 0rem 15px;
				padding: 0 13px;
				margin-left: 15px;

				@include maxWidth(780) {
					width: 250px;
				}

				@include maxWidth(660) {
					width: 200px;
				}

				@include maxWidth(600) {
					width: 150px;
				}

				@include maxWidth(400) {
					width: 120px;
					margin-left: 5px;
					padding: 0 10px;
				}
			}

			.hr {
				width: 2px;
				height: 20px;
				background: #2972fa;
				opacity: 0.5;
				margin: 0 20px;
			}

			img {
				width: 30px;
				height: 30px;
			}
		}
	}

	.content {
		margin: 25px 50px;

		@include maxWidth(550) {
			margin: px2vw(25) px2vw(30);
		}
	}

	.fdd {
		background: #fff;

		@include maxWidth(1024) {
			top: 10px;
			left: 10px;
		}
	}

	.shiPin {
		.space-between {
			padding: 0 10px;

			.userNameText {
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}

		.line2 {
			padding: 0 0 0 10px;
			display: flex;
			justify-content: space-between;

			:deep(.el-checkbox__inner) {
				//大小
				width: 20px;
				height: 20px;

				&::after {
					height: 12px;
					left: 8px;
				}
			}

			.shiPinTital {
				line-height: 2.5;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}

		.cesi {
			cursor: pointer;
			width: 100%;
			// height: 180px;
			// margin-right: 10px;
			aspect-ratio: 1.5 / 1;
			object-fit: inherit;

			.hoverBtn {
				width: 100%;
				height: 100%;
			}

			// @include maxWidth(1400) {
			// 	height: 160px;
			// }
			// @include maxWidth(900) {
			// 	height: 140px;
			// }
			// @include maxWidth(800) {
			// 	aspect-ratio: 1 / 1;
			// 	height: initial;
			// }

			.cover {
				width: 100%;
				height: 100%;
				object-fit: inherit;
				border-radius: 8px;
			}
		}

		.bo {
			width: 50px;
			height: 40px;
			left: 15px;
			bottom: 90px;

			@include maxWidth(900) {
				width: 40px;
				height: 30px;
			}
		}

		.state {
			width: 50px;
			height: 20px;
			background: #ff952c;
			border-radius: 1px 8px 1px 8px;
			top: 11px;
			right: 10px;
		}
	}
}

.paginationClass {
	padding-top: 20px;
	display: flex;
	justify-content: center;
}

.right {
	@include maxWidth(1200) {
		width: 200px;
	}

	@include maxWidth(1024) {
		display: none;
	}
}

:deep(.el-range-editor.el-input__wrapper) {
	width: 280px;

	@include maxWidth(1024) {
		width: 230px;
	}

	@include maxWidth(768) {
		width: 180px;
	}

	@include maxWidth(738) {
		width: 160px;
	}
}

.disNo {
	@include maxWidth(720) {
		display: none;
	}
}

.disNo8 {
	@include maxWidth(800) {
		display: none;
	}
}

.disNo7 {
	@include maxWidth(600) {
		display: none;
	}
}

.titleFs {
	@include maxWidth(550) {
		font-size: 14px;
	}

	@include maxWidth(450) {
		font-size: 12px;
	}
}

.fen-ax {
	white-space: nowrap;
	width: 100%;
	overflow-x: scroll;
}

.el-checkbox.el-checkbox--large {
	display: flex;
	justify-content: center;
	align-content: center;
	width: 60px !important;
	height: 40px !important;
}
</style>
